import React from 'react'
import { useDispatch } from 'react-redux'
import { loginAction } from './action'
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';


const Login = () => {
    //action
    // {type:'login',payload:{a:100}}
    const dispatch = useDispatch();
    const login = (val) => {

        console.log(val);
        const username = val.username;
        const passwd = val.password;
        // console.log(u,p)
        dispatch(loginAction({username, passwd}))//没有传值
        // dispatch(loginAction({username:'fdy101',passwd:'1234567'}))//没有传值
        // dispatch({type:'login'})//没有传值
    }
    return (
        <Form
            style={{ 'maxWidth': '300px', 'margin': '0 auto' }}
            name="normal_login"
            className="login-form"
            initialValues={{
                remember: true,
            }}
            onFinish={login}
        >
            <Form.Item
                name="username"
                rules={[
                    {
                        required: true,
                        message: 'Please input your Username!',
                    },
                ]}
            >
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
            </Form.Item>
            <Form.Item
                name="password"
                rules={[
                    {
                        required: true,
                        message: 'Please input your Password!',
                    },
                ]}
            >
                <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="Password"
                />
            </Form.Item>
            <Form.Item>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>Remember me</Checkbox>
                </Form.Item>

                <a className="login-form-forgot" style={{ 'float': 'left' }} href="">
                    Forgot password
                </a>
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button" style={{ 'width': '100%' }}>
                    Log in
                </Button>
                Or <a href="">register now!</a>
            </Form.Item>
        </Form>
    )
}

export default Login
